<script setup lang="ts">
import {
  WechatOutlined,
  TaobaoCircleOutlined,
  LockOutlined,
  UserOutlined, MobileOutlined, MailOutlined
} from '@ant-design/icons-vue';
import { NotificationPlacement, notification } from 'ant-design-vue';
import {loginApi} from "@/api/login/login.ts"
import type { LoginMobileParams, LoginParams } from '@/api/login/login'
import { get } from 'lodash-es'
const router = useRouter()
const token = useAuthorization()

const activeKey = ref('1');
const loginForm = reactive({
  username: '',
  password: '',
  mobile: '',
  captcha: '',
  type: 'account',
  remember: true,
})
const formLogin = ref()

const isLoginError = ref(false)

/**
 * 登录
 */
async function login() {
  let params: LoginParams | LoginMobileParams

  if (loginForm.type === 'account') {
    params = {
      username: loginForm.username,
      password: loginForm.password,
    } as unknown as LoginParams
  } else {
    params = {
      mobile: loginForm.mobile,
      captcha: loginForm.captcha,
      type: 'mobile',
    } as unknown as LoginMobileParams
  }
  const {data} = await loginApi(params)
  console.log('loginData', data)
  token.value = data?.accessToken
  notification.success({
    message: '登录成功',
    description: '欢迎回来！',
    duration: 3,
  })
  // 获取当前是否存在重定向的链接，如果存在就走重定向的地址
  const redirect = getQueryParam('redirect', '/')
  router.push({
    path: redirect,
    replace: true,
  })
}

function getCaptcha() {
  formLogin.value?.validate(['mobile']).then((res) => {
    console.log("666", res)
  })
}

function getQueryParam(param: string | string[], defaultVal = '') {
  const query = router.currentRoute.value?.query ?? {}
  const val = get(query, param) ?? defaultVal
  return decodeURIComponent(val)
}
</script>

<template>
  <div class="fc" style="background-color: #f0f2f5">

    <div class="login-content flex-center" style="background-color: #f0f2f5;">
      <div class="login-main" style="border-radius: 0.25rem">
        <!--   登录框头部     -->
        <div class="flex-between h-15 px-4">
          <div class="flex-end">
            <span class="login-logo">
              <img class="login-logo" w-full h-full object-cover src="@/assets/favicon.png">
            </span>
            <span class="login-title">
              锦衣卫
            </span>
            <span class="login-desc">
              后台管理系统
            </span>
          </div>
        </div>
        <a-divider m-0/>
        <!--    登录主体    -->
        <div class="flex min-h-[520px] box-border" style="background-color: #f0f2f5">
          <!--    登录主体左侧      -->
          <div class="flex-center min-h-[520px] w-[700px]">
            <img class="wd75 ht75" src="@/assets/login/login-left.png">
          </div>
          <a-divider type="vertical" class="login-divider min-h-[520px]"/>
          <!--     登录主体右侧     -->
          <div class="pl20 pr20 w-[350px]">
            <div class="pt20 pb20 font-size-[25px] font1000 text-center">
              欢迎使用本系统
            </div>
            <a-form ref='formLogin' :model="loginForm">
              <a-tabs v-model:activeKey="activeKey" centered>
                <a-tab-pane key="1" tab="账户密码登录">
                  <a-form-item>
                    <a-alert v-if="isLoginError" message="账户或密码错误" type="error" />
                    <a-input v-model:value="loginForm.username" placeholder="账号">
                      <template #prefix>
                        <user-outlined :style="{ color: 'rgba(0,0,0,.25)' }"/>
                      </template>
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-input prefix-icon="Lock" v-model:value="loginForm.password" type="password" show-password placeholder="密码">
                      <template #prefix>
                        <lock-outlined :style="{ color: 'rgba(0,0,0,.25)' }"/>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-tab-pane>
                <a-tab-pane key="2" tab="手机号登录">
                  <a-form-item name="mobile" :rules="[{ required: true, pattern: /^1[34578]\d{9}$/, message: 'Please input your mobile!' }]">
                    <a-input v-model:value="loginForm.mobile" placeholder="手机号">
                      <template #prefix>
                        <mobile-outlined :style="{ color: 'rgba(0,0,0,.25)' }"/>
                      </template>
                    </a-input>
                  </a-form-item>
                  <a-row :gutter="24">
                    <a-col :span="16">
                      <a-form-item>
                        <a-input prefix-icon="Message" v-model:value="loginForm.captcha" placeholder="验证码">
                          <template #prefix>
                            <mail-outlined :style="{ color: 'rgba(0,0,0,.25)' }"/>
                          </template>
                        </a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8" style="float: right">
                      <a-button style="width: 100%" @click="getCaptcha()">验证码</a-button>
                    </a-col>
                  </a-row>
                </a-tab-pane>
              </a-tabs>

              <a-form-item>
                <div style="width: 100%">
                  <a-checkbox >自动登录</a-checkbox>

                  <router-link to="" style="float: right">忘记密码</router-link>
                </div>

              </a-form-item>

              <a-form-item>
                <a-button type="primary" style="width: 100%;height: 40px" @click="login()">登录</a-button>
              </a-form-item>

              <div>
                <span>其他登录方式</span>
                <a>
                  <wechat-outlined class="item-icon"/>
                </a>
                <a>
                  <taobao-circle-outlined class="item-icon"/>
                </a>
                <a>
                  <wechat-outlined class="item-icon"/>
                </a>
                <router-link to="" style="float: right">注册账号</router-link>
              </div>
            </a-form>
          </div>
        </div>
      </div>
    </div>
    <!--  页脚  -->
    <div py-24px px-50px fixed bottom-0 z-11 w-screen text-14px>
      <div class="text-center py-16px px-0">
        <a href="_self">帮助</a>
        <a href="_self">隐私</a>
        <a href="_self">条款</a>

        <div font-size-14px style="color: rgba(0, 0, 0, 0.45)">
          沈阳职场精英无线科技有限公司 版权所有
          <a  href="https://beian.miit.gov.cn/" target="_blank">
            ©www.nijialaoxuezhang.com
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "@/styles/index.less";

.login-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.login-main{
  box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
}

.login-logo {
  width: 44px;
  height: 44px;
  margin-right: 16px;
  vertical-align: top;
  line-height: 1;
}
.login-title {
  color: rgba(0,0,0,.85);
  font-weight: 600;
  font-size: 43px;
  line-height: 1;
}

.login-desc {
  color: rgba(0,0,0,.45);
  font-size: 14px;
  margin-left: 16px;
  line-height: 1;
}

.login-divider{
   //display: none;
 }
a {
  color: rgba(0, 0, 0, 0.45);
  transition: all 0.3s;
  &:not(:last-child) {
    margin-right: 40px;
  }
}
</style>
